/* Dark Theme */
@import "../defaults";

:root.sakaiUserTheme-dark {
    /////////////////////////////////////////////////////////////
    // Color palette generation
    // Use defineColorHSL to generate an 11 shade palette for a color.
    // @include defineColorHSL(colorname, hue, saturation, lightness)
    // @param colorname
    //      Type: string
    //      expects a CSS custom property name starting with --
    // @param hue
    //      Type: integer
    //      expects an integer 0-255
    // @param saturation
    //      Type: percentage
    //      expects a percentage 0-100%
    // @param lightness
    //      Type: percentage
    //      expects a percentage 0-100%
    // @returns 11 CSS Custom Properties available in :root
    //      named colorname-0 through colorname-10
    //      The HSL you provide in the parameters will be in the
    //      middle of the range at -5.
    // Example 
    // @include defineColorHSL(--myschool-gray, 214, 3%, 55%);
    //      returns --myschool-gray-5: hsl(214, 3%, 55%;
    //
    // In addition to the primary branding color defined here, Sakai comes 
    // predefined with gray, blue, teal, gold, green, orange,
    // purple, and red palettes available for you to use.
    // More info about defineColorHSL in sass/themes/_base.scss
    @include defineColorHSL(--sakai-greyblue, 214, 12%, 57%);
    /////////////////////////////////////////////////////////////

    /////////////////////////////////////////////////////////////
    // Main theme definition
    // Start by defining the variables below to create
    // your theme. If advanced customization is necessary,
    // continue to the remaining variables.
    /////////////////////////////////////////////////////////////

    // Logo
    // You may define a specific --logo for dark theme as well.
    // Here, we reduce the opacity of the default logo to make 
    // it fit in better with dark theme.
    // Suggested: decimal .7 and .9
    --logo: url(./images/sakaiLogo.png);
    --logo-opacity: .7;

    .logo-light {
      display: none;
    }
    .logo-dark {
        display: block;
    }

    // Primary branding color. 
    // Suggested: Your institution's main branding color.
    // Used in the top header, action buttons, etc. Commonly used as the background
    // color with white text color.
    --sakai-primary-color-1: var(--sakai-brand);

    // Default: A slightly lighter shade of --sakai-primary-color-1
    // Used for hover effects and higher contrast with white text color
    --sakai-primary-color-2: var(--sakai-brand--lighter-1);

    // Default: A slightly lighter shade of --sakai-primary-color-2
    // Used for active, focus, selected effects
    --sakai-primary-color-3: var(--sakai-brand--lighter-2);

    // Default: A lighter tint of --sakai-primary-color-1. 
    // Suggested: A light tint of your institution's main branding color.
    // Used to highlight active/current site in favorites and active/current tool in toolmenu
    // Commonly used with white background color with white text color.
    --sakai-active-color-1: var(--sakai-brand--darker-1);

    // Default: A slightly lighter shade of --sakai-active-color-1
    // Used for hover effects and higher contrast with --sakai-text-color-3
    --sakai-active-color-2: var(--sakai-brand);

    // Default: A slightly lighter shade of --sakai-active-color-2
    // Used for active, focus, selected effects with --sakai-text-color-3
    --sakai-active-color-3: var(--sakai-brand--lighter-1);

        // Default: A very light tint of gray. 
    // Suggested: --sakai-greyblue--darker-5.
    // Used as background for non-active/current site in favorites and buttons
    // Commonly used with dark text color.
    --sakai-passive-color-1: var(--sakai-greyblue--darker-5);

    // Default: A slightly darker shade of --sakai-passive-color-1
    // Used for hover effects and higher contrast with --sakai-text-color-1
    --sakai-passive-color-2: var(--sakai-greyblue--darker-4);

    // Default: A slightly darker shade of --sakai-passive-color-2
    // Used for active, focus, selected effects with --sakai-text-color-1
    --sakai-passive-color-3: var(--sakai-greyblue--darker-3);

    // Primary background color. 
    // Suggested: very dark grey
    // Used on the body and main content containers
    --sakai-background-color-1: var(--sakai-greyblue--darker-6);

    // Default: A slightly lighter shade of --sakai-background-color-1
    // Used in hover effects of --sakai-background-color-1, alternating table rows
    --sakai-background-color-2: var(--sakai-greyblue--darker-5);

    // Default: A slightly lighter shade of --sakai-background-color-2
    // Used for active, focus, selected effects of --sakai-background-color-1
    // and hover effects of --sakai-background-color-2
    --sakai-background-color-3: var(--sakai-greyblue--darker-4);

    // Default: A slightly lighter shade of --sakai-background-color-3
    // Used for active, focus, selected effects of --sakai-background-color-3
    --sakai-background-color-4: var(--sakai-greyblue--darker-3);

    // Default: A slightly lighter shade of --sakai-background-color-4
    // Used for active, focus, selected effects of --sakai-background-color-3
    --sakai-background-color-5: var(--sakai-greyblue--darker-2);

    // Default: A slightly lighter shade of --sakai-background-color-5
    // Used for active, focus, selected effects of --sakai-background-color-3
    --sakai-background-color-6: var(--sakai-greyblue--darker-1);

    // Default: A slightly lighter shade of --sakai-background-color-6
    // Used for active, focus, selected effects of --sakai-background-color-3
    --sakai-background-color-7: var(--sakai-greyblue);

    // Secondary branding color. 
    // Suggested: An alterate branding color distinct from
    // what you select for --sakai-primary-color-1
    // Used in new user tutorial, user profile image border
    --sakai-secondary-color-1: var(--sakai-color-blue--lighter-2);

    // Tertiary branding color. 
    // Suggested: A third branding color distinct from
    // what you selected for --sakai-primary-color-1 and --sakai-secondary-color-1
    // Used in user profile image border
    --sakai-tertiary-color-1: var(--sakai-color-orange--lighter-2);

    // Primary border color used across sakai. 
    // Suggested: light gray
    --sakai-border-color: var(--sakai-color-gray--darker-4);

    // Primary border color used across sakai for things like modals that pop up
    // and need to be distinct from the background color.
    // Suggested: darkish grey
    --sakai-border-color-modal: var(--sakai-color-gray--lighter-6);

    // Primary text color used across sakai. 
    // Suggested: light grey
    // Most commonly used against --sakai-background-color-1
    --sakai-text-color-1: var(--sakai-color-gray--lighter-5);

    // Default: A slightly lighter shade of --sakai-text-color-1
    // Used in certain hover effects, but NOT a[href] elements
    --sakai-text-color-2: var(--sakai-color-gray--lighter-6);

    // Default: A much lighter shade of --sakai-primary-color-1
    // Used as text color of active site in favorites, active tool in toolmenu
    --sakai-text-color-3: var(--sakai-brand--lighter-6);

    // Default: A slightly lighter shade of --sakai-text-color-1
    // Used to reduce attention of text
    --sakai-text-color-dimmed: var(--sakai-color-gray--lighter-4);

    // Default: A lighter shade of --sakai-text-color-1
    // Used to make elements appear disabled or "grayed out"
    --sakai-text-color-disabled: var(--sakai-color-gray--lighter-2);

    // Default: --sakai-color-white
    // Used for text color on saturated color backgrounds like primary button, header bar icons
    --sakai-text-color-inverted: var(--sakai-color-gray--lighter-6);

    /////////////////////End main theme definition/////////////////////

    // Additional dark theme variables
    --sakai-image-invert: grayscale(100%) invert(100%);

    // Overrides _light.scss variables when necessary
    //--top-header-background: var(--sakai-background-color-1);
    //--top-header-background-logo: var(--top-header-background);
    //--top-header-border-color: transparent;
    //--top-header-text-color: var(--sakai-text-color-2);
    --breadcrumbs-tool-color: var(--sakai-text-color-color-3);
    --breadcrumbs-hover-color: var(--sakai-primary-color-3);
    --link-color: var(--sakai-text-color-3);
    --link-active-color: var(--sakai-text-color-2);
    --link-hover-color: var(--sakai-text-color-2);
    --link-visited-color: var(--sakai-color-purple--lighter-2);
    // actve state for radio button:
    --radio-button-background: var(--sakai-text-color-1);
    // actve state for checkbox:
    --checkbox-background: var(--sakai-primary-color-1);
    // Information (info) banner
    --infoBanner-bordercolor: var(--sakai-color-blue--darker-4);
    --infoBanner-bgcolor: var(--sakai-color-blue--darker-6);
    --infoBanner-color: var(--sakai-color-blue--lighter-4);
    // Success banner
    --successBanner-bordercolor: var(--sakai-color-green--darker-4);
    --successBanner-bgcolor: var(--sakai-color-green--darker-6);
    --successBanner-color: var(--sakai-color-green--lighter-4);
    // Warning (warn) banner
    --warnBanner-bordercolor: var(--sakai-color-gold--darker-4);
    --warnBanner-bgcolor: var(--sakai-color-gold--darker-6);
    --warnBanner-color: var(--sakai-color-gold--lighter-4);
    // Error banner
    --errorBanner-bordercolor: var(--sakai-color-red--darker-4);
    --errorBanner-bgcolor: var(--sakai-color-red--darker-6);
    --errorBanner-color: var(--sakai-color-red--lighter-4);

    //Timer progress bar backgrounds
    --timer-bar-full-bg: var(--sakai-color-green--darker-2);
    --timer-bar-medium-bg: var(--sakai-color-orange--darker-1);

    --progress-bar-bg: var(--sakai-color-blue--darker-5);
    --progress-bar-empty-bg: var(--sakai-primary-color-1);

    --footer-PoweredBy-bg: var(--sakai-color-gray--darker-1);
    --sakai-highlight-color: var(--sakai-color-red--lighter-4);

    //New sidebar colors
    --site-nav-btn-current-hover-color: var(--site-nav-btn-active-color);
    --site-nav-btn-hover-bg: var(--sakai-brand);
    --site-nav-btn-page-hover-border: var(--sakai-brand--lighter-2);

    // Dashboard
    --sakai-calendar-button-background-color: var(--sakai-background-color);
    --sakai-calendar-button-color: var(--button-text-color);
    --sakai-calendar-button-disabled-background-color: var(--button-disabled-background);
    --sakai-calendar-today-background-color: yellow;
    --sakai-calendar-today-color: black;
    --sakai-calendar-has-events-color: white;
    --sakai-calendar-has-events-background-color: green;

    // Jumbotron
    --jumbotron-bg: var(--sakai-color-blue--darker-5);
    --jumbotron-color: var(--sakai-text-color-1);

    //--sakai-current-site: transparent;
    //--sakai-current-site-color: var(--sakai-text-color-2);
    --sakai-curent-site-border-color: var(--sakai-brand--lighter-3);
    //--sakai-selected-page-bg-color: var(--sakai-brand);
    //--sakai-selected-page-color: var(--sakai-text-color-inverted);

    --sakai-thumbnail-background-color: var(--sakai-background-color-2);

    --sakai-modal-header-bg: var(--sakai-background-color-3);
    --sakai-modal-header-color: var(--sakai-text-color-1);
    --sakai-modal-close-btn-bg: var(--sakai-text-color-1);

    --sakai-offcanvas-header-bg: var(--sakai-background-color-3);
    --sakai-offcanvas-header-color: var(--sakai-text-color-1);
    --sakai-offcanvas-close-btn-bg: var(--sakai-background-color-1);

    --sakai-selected-page-bg-color: var(--sakai-brand);

    //--sakai-scrollbar-background-color: var(--sakai-border-color);
    --sakai-scrollbar-thumb-color: var(--sakai-brand--lighter-7);
    //--sakai-scrollbar-thumb-hover-color: var(--sakai-brand--lighter-3);

    .accordion-button::after {
      filter: invert(100%);
    }

    .w_content .btn {
      color: white;
    }

    .table {
      --bs-table-color: var(--sakai-text-color-1);
      --bs-table-striped-color: var(--sakai-text-color-1);
      --bs-table-striped-bg: var(--sakai-background-color-2);
      --bs-table-hover-color: var(--sakai-text-color-1);
    }

    .btn {
      --bs-btn-color: white;
    }

    input {
      color-scheme: dark;
    }

    input.form-control, textarea.form-control, select.form-control {
      background-color: var(--sakai-background-color-2);
      color: var(--sakai-text-color-1);
    
      &:focus,
      &:active,
      &:-webkit-autofill {
        background-color: var(--sakai-background-color-3);
        color: var(--sakai-text-color-2);
      }
    }
    
    input.form-control:-webkit-autofill,
    input.form-control:-webkit-autofill:hover, 
    input.form-control:-webkit-autofill:focus, 
    input.form-control:-webkit-autofill:active {
      transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
      --webkit-text-fill-color: var(--sakai-text-color-1) !important;
      background-color: var(--sakai-background-color-2) !important;
    }

    --select-background-image-url: url(#{$skin-path}/images/icon-arrow-down-dark.png);

    .dropdown-menu {
      --bs-dropdown-bg: var(--sakai-background-color-3);
      --bs-dropdown-color: var(--sakai-text-color-1);
      --bs-dropdown-header-color: var(--sakai-text-color-2);
      --bs-dropdown-divider-bg: white;
    }
    .dropdown-item {
      --bs-dropdown-link-color: var(--sakai-text-color-1);
    }
    .card {
      --bs-card-bg: var(--sakai-background-color-3);
    }

    .nav-tabs {
      --bs-nav-tabs-link-active-bg: var(--sakai-background-color-3);
      --bs-nav-tabs-link-active-color: var(--sakai-text-color-1);
    }

    .nav-link {
      --bs-nav-link-color: white;
      --bs-nav-link-hover-color: white;
    }

    .list-group {
      --bs-list-group-bg: var(--sakai-background-color-3);
      --bs-list-group-color: var(--sakai-text-color-1);
      --bs-list-group-action-color: var(--sakai-text-color-2);
    }

    .popover {
      --bs-popover-header-bg: var(--sakai-background-color-3);
      --bs-popover-bg: var(--sakai-background-color-2);
    }

    .paginate_button {
      --bs-pagination-disabled-bg: var(--sakai-passive-color-1);
      --bs-pagination-bg: var(--sakai-background-color-2);
      --bs-pagination-color: var(--link-color);
      --bs-pagination-hover-color: var(--sakai-text-color-1);
      --bs-pagination-hover-bg: var(--sakai-active-color-2);
    }

    .poweredby__image {
        filter: invert(1) hue-rotate(180deg);
    }
}
